<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link rel="stylesheet" type="text/css" href="../css/col.css">
    <style>

        *{/*基本选择器 选择所有元素*/
            box-sizing: border-box;
        }

        li{
            float: left;
            overflow: auto;
        }

        ul.a{/*上边界列表格式*/
            list-style-type: none;/*列表格式*/
            margin: 0;/*元素边框外边界*/
            padding: 0;
            overflow: hidden;/*元素溢出元素框时隐藏*/
            background-color: #A9A9A9;
        }

        ul.b{/*左侧导航栏格式*/
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        ul.c{/*计划列表样式*/
            list-style-type: disc;
        }

        .else{/*其他页面标签style*/
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 50px;
            text-decoration: none;
        }

        .else:hover:not(.active){
            background-color: #696969;
        }

        .now{/**当前页面标签style**/
            float: left;
            display: block;/*块级元素*/
            color: white;
            text-align: center;/*文本水平居中*/
            padding: 14px 50px;/*元素边框上下左右内边距*/
            text-decoration: none;/*文本修饰，防止链接带下划线*/
            background-color: #ADD8E6;
        }

        .row::after{/*主表格部分*/
            content: "";/*after在被选元素后插入内容,内容为空*/
            clear: both;/*左右两侧不允许浮动元素*/
            display: table;/*块级表格*/
        }

        .leftboard{/*左侧导航栏*/
            background-color: #ADD8E6;
            height: 100%;
            width: 16.66%;
            left: 0;
            top: 0;
            margin-top: 49px;
            position: absolute;/*相对浏览器窗口绝对定位*/
        }

        .lefthead{
            color: black;
            display: block;
            text-decoration: none;
            text-align: center;
            padding: 20px 90px;
            margin: 0;
        }
        .lefthead:hover{
            background-color: #B0E0E6;
        }

        .planboard{
            background-color: #DCDCDC;
            border-radius: 15px;
            padding: 10px;
            margin: 30px;
            left: 100px;
            box-shadow: 10px 10px 8px #D3D3D3;/*阴影*/
        }

        .planboard li{
            float: none;
            padding: 15px;
        }

        .planboard_2{
            background-color: #DCDCDC;
            border-radius: 15px;
            padding: 10px;
            margin: 30px;
            left: 100px;
            box-shadow: 10px 10px 8px #D3D3D3;/*阴影*/
        }

        .planboard_2 li{
            float: none;
            padding: 15px;
        }

        /*个人信息表格*/
        table.personal{
            margin-left: 400px;
            margin-top: 30px;
            width: 400px;
            height: 200px;
            border-style: solid;
        }
        table.personal tr{
            border-style: solid;
        }
        table.personal td{
            border-style: solid;
        }

    </style>
</head>
<body style="margin: 0; padding: 0;">

    <div>
        <!--上方标签-->
        <ul class="a">
            <li><img src="../images/logo.png" alt="logo" style="width: 55px; height: 14px;"></li>
            <li onclick="SW()"> <a class="else" id="v" href="Community.html?value=">社区动态</a> </li>
            <li> <a href="#" class="now">个人主页</a> </li>
            <li style="float:right;"> <a href="../index.html"> <img src="../images/yh.png" alt="LogIn" style="width: 45px; height: 45px; border-radius: 50%; padding: 3px;"> </a> </li>
        </ul>
    </div>

    <!--左侧导航栏-->
    <div class="row">
        <div class="col-2">
            <div class="leftboard">
                <div>
                    <img src="../images/tx.png" alt="你的头像" style="width: 100%; height: 250px; border-radius: 50%; padding: 30px; margin-top: 45px;">
                </div>
                <div>
                    <ul class="b">
                        <li> <a href="#" class="lefthead">个人资料</a> </li>
                        <li> <a href="#" class="lefthead">我的计划</a> </li>
<!--                        <li> <a href="#" class="lefthead">我的好友</a> </li>-->
                    </ul>
                </div>
            </div>
        </div>

        <h1 style="margin-left: 400px; margin-top: 40px;">个人信息</h1>
        <table id="faketable">
            <table class="personal" hidden>

                <tr>
                    <td>username</td>
                    <td>username</td>
                </tr>
                <tr>
                    <td>email</td>
                    <td>email</td>
                </tr>
                <tr>
                    <td>phone</td>
                    <td>1234567</td>
                </tr>
                <tr>
                    <td>eventcount</td>
                    <td>999</td>
                </tr>
            </table>
        </table>

<!--计划列表-->
        <div class="col-8" style="margin-left: 350px; margin-top: 60px;">
            <div class="planboard">
                <h1 style="padding-left: 20px;">你发布的计划</h1>
                <ul class="c">
<!--                    <li id="plan">-->
<!--                        PLAN 1<br>-->
<!--                        开始时间 结束时间-->
<!--                    </li>-->
<!--                    <li>PLAN 2</li>-->
<!--                    <li>PLAN 3</li>-->
                </ul>
            </div>
        </div>

        <div class="col-8" style="margin-left: 350px; margin-top: 60px;">
            <div class="planboard_2">
                <h1 style="padding-left: 20px;">你参加的计划</h1>
                <ul class="c_2">
<!--                    <li id="plan">-->
<!--                        PLAN 1<br>-->
<!--                        开始时间 结束时间-->
<!--                    </li>-->
<!--                    <li>PLAN 2</li>-->
<!--                    <li>PLAN 3</li>-->
                </ul>
            </div>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="../js/Homepage.js" charset="GBK"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/web3.min.js"></script>
    <script src="../js/truffle-contract.js"></script>
    <!--<script src="../js/personalPage.js"></script>-->
    <script>
        function SW() {
            document.getElementById("v").href += UserHome.UserId;
        }
    </script>

</body>
</html>
